<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 用户信息 -->
      <el-card class="header">
        <el-row type="flex">
          <el-col>
            <el-row type="flex" style="width: 500px">
              <el-col :span="8">
                <el-avatar :size="100" :src="this.$store.state.user.userInfo.image">
                  <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png">
                </el-avatar>
              </el-col>
              <el-col>
                <el-row>
                  <p class="email">邮箱:{{ userInfo.email }}</p>
                </el-row>
                <el-row>
                  <p class="message">欢迎您的到来,<span>{{ userInfo.username }}</span>,祝你愉快每一天</p>
                </el-row>
              </el-col>
            </el-row>
            <el-row>
              <div class="user-name"><p>{{ this.$store.state.user.userInfo.username }}</p></div>
            </el-row>
          </el-col>
        </el-row>
      </el-card>
      <!-- 日历 -->
      <el-card class="header">
        <el-collapse v-model="activeNames">
          <!-- 日历 -->
          <el-collapse-item title="日历" name="1">
            <el-calendar v-model="dateVal" />
          </el-collapse-item>
        </el-collapse>
      </el-card>

      <!-- 树形图 -->
      <!-- <el-card class="header">
        <el-row>
          <div class="main">
            <el-col :span="12"><div class="grid-content bg-purple"> <div ref="zhuxing" class="zhuxing" /></div></el-col>
            <el-col :span="12"><div class="grid-content bg-purple-light"><div ref="bingtu" class="bingtu" /></div></el-col>

          </div>
        </el-row>
      </el-card> -->
    </div>
  </div>
</template>

<script>
// 树形图的引入
// 1、引入 (全部引入)
// import * as echarts from 'echarts'
// import { getProperties } from '@/api/property'
// import { getCategories } from '@/api/categories'
export default {
  data() {
    return {
      userInfo: this.$store.state.user.userInfo,
      activeNames: ['1'],
      dateVal: new Date(),

      // 这个是树形图的数据
      houseList: [], //  房产列表
      one: 0,
      two: 0,
      three: 0,
      four: 0,
      five: 0,
      six: 0,
      seven: 0
    }
  }
  // async mounted() {
  //   // const res = await getCategories()
  //   // console.log(17, res);

  //   // 获取房产列表
  //   this.houseList = await (await getProperties()).data;
  //   // console.log(2222, this.houseList);

  //   // 动态设置，柱状图高度 (价格没设置正则，效果出不来)
  //   (this.one = this.houseList.filter((item) => item.price <= 1).length),
  //   (this.two = this.houseList.filter(
  //     (item) => item.price > 1 && item.price <= 2
  //   ).length),
  //   (this.three = this.houseList.filter(
  //     (item) => item.price > 2 && item.price <= 3
  //   ).length),
  //   (this.four = this.houseList.filter(
  //     (item) => item.price > 3 && item.price <= 4
  //   ).length),
  //   (this.five = this.houseList.filter(
  //     (item) => item.price > 4 && item.price <= 5
  //   ).length),
  //   (this.six = this.houseList.filter(
  //     (item) => item.price > 5 && item.price <= 6
  //   ).length),
  //   (this.seven = this.houseList.filter((item) => item.price > 6).length),
  //   //   2、初始化
  //   this.$nextTick(() => {
  //     // console.log(12, this.one);

  //     const myChart = echarts.init(this.$refs.zhuxing)
  //     const myChart2 = echarts.init(this.$refs.bingtu)

  //     // 3、添加配置和数据
  //     const option = {
  //       legend: {
  //         data: ['房产套数']
  //       },
  //       xAxis: [
  //         {
  //           type: 'category',
  //           data: [
  //             '5以下',
  //             '10以下',
  //             '15以下',
  //             '20以下',
  //             '25以下',
  //             '30以下',
  //             '35以下'
  //           ],
  //           axisPointer: {
  //             type: 'shadow'
  //           }
  //         }
  //       ],
  //       yAxis: [
  //         {
  //           type: 'value',
  //           name: '房产关系表',
  //           min: 0,
  //           max: 5,
  //           interval: 1,
  //           axisLabel: {
  //             formatter: '{value} 套'
  //           }
  //         }
  //       ],
  //       series: [
  //         {
  //           name: '房产套数',
  //           type: 'bar',
  //           data: [
  //             this.one,
  //             this.two,
  //             this.three,
  //             this.four,
  //             this.five,
  //             this.six,
  //             this.seven
  //           ]
  //         }
  //       ]
  //     }

  //     const option2 = {
  //       tooltip: {
  //         trigger: 'item'
  //       },
  //       legend: {
  //         top: '5%',
  //         left: 'center'
  //       },
  //       series: [
  //         {
  //           name: '房产套数',
  //           type: 'pie',
  //           radius: ['40%', '70%'],
  //           avoidLabelOverlap: false,
  //           itemStyle: {
  //             borderRadius: 10,
  //             borderColor: '#fff',
  //             borderWidth: 2
  //           },
  //           label: {
  //             show: false,
  //             position: 'center'
  //           },
  //           emphasis: {
  //             label: {
  //               show: true,
  //               fontSize: '40',
  //               fontWeight: 'bold'
  //             }
  //           },
  //           labelLine: {
  //             show: false
  //           },
  //           data: [
  //             { value: this.one, name: '0~10万' },
  //             { value: this.two, name: '10~20万' },
  //             { value: this.three, name: '20~30万' },
  //             { value: this.four, name: '30~40万' },
  //             { value: this.five, name: '40~50万' },
  //             { value: this.six, name: '50~60万' },
  //             { value: this.seven, name: '60~70万' }
  //           ]
  //         }
  //       ]
  //     }

  //     // 4、注入，使用
  //     myChart.setOption(option)
  //     myChart2.setOption(option2)
  //   })
  // }
}
</script>

<style lang="scss" scoped>
.header {
  margin-bottom: 20px;
  .user-name {
    width: 100px;
    text-align: center;
  }
  .message span {
    color: red;
  }
}

// 树形图的样式
.zhuxing {
  width: 400px;
  height: 500px;
  margin-left: 100px;
  margin-top: 30px;
}

.bingtu {
  width: 400px;
  height: 700px;
  margin-left: 10px;
  margin-top: 30px;
}
.main {
  display: flex;
}
</style>
